<template>
  <div>
    <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";

import axios from "axios";

// 引入编辑器插件（基本免费插件都在这儿了）
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/image"; // 插入图片
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
// import "tinymce/icons/default/icons";
// import "tinymce/plugins/toc"; //目录生成器
// import "tinymce/plugins/importcss"; //引入css
// import "tinymce/plugins/fullpage"; //文档属性
// import "tinymce/plugins/quickbars"; //快速工具栏
// import 'tinymce/plugins/spellchecker'  //拼写检查，未加入汉化，不建议使用
// import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
// import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import plugins from "./plugins";
import toolbar from "./toolbar";
import { fontsize_formats, font_formats, line_height } from "./fontstyle";
export default {
  name: "TinymceDemo",
  components: { Editor },
  props: {
    htmlStr: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tinymceHtml: this.htmlStr,
      editorInit: {
        language_url: "tinymce/langs/zh_CN.js", //你下载的语言包的路径
        language: "zh_CN",
        skin_url: "tinymce/skins/ui/oxide", //主题
        height: 700,
        max_height: 700,
        menubar: false, //隐藏默认菜单栏
        branding: false, //隐藏右下角商标
        plugins,
        toolbar,
        fontsize_formats,
        font_formats,
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
        style_formats_merge: true, //设置行高
        style_formats_autohide: true, //设置行高
        style_formats: [{
            title: "Line Height",
            items: line_height,
        }],
        // forced_root_block : 'div',  默认是段落(p)
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(blobInfo.blob().size / 1024 / 1024);

          if (blobInfo.blob().size / 1024 / 1024 > 20) {
            failure("上传失败，图片大小请控制在 20M 以内");
          } else {
            let formData = new FormData();
            formData.append("file", blobInfo.blob());
            // 上传图片的接口
            axios
              .post("/api/upload/image", formData)
              .then((res) => {
                success(res.data.url);
              })
              .catch(() => {
                failure("上传出错，服务器开小差了呢");
              });
          }
        },
        file_picker_callback: (callback, value, meta) => {
          if (meta.filetype === "media") {
            // 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。
            let input = document.createElement("input"); //创建一个隐藏的input
            input.setAttribute("type", "file");
            input.setAttribute("accept", ".mp4");
            input.onchange = function () {
              let file = this.files[0];
              let formData = new FormData();
              formData.append("file", file);
              // 上传视频接口
              axios
                .post("/api/upload/video", formData)
                .then((res) => {
                  console.log(res.data.url);
                  callback(res.data.url);
                })
                .catch(() => {
                  console.log("上传出错，服务器开小差了呢");
                });
            };
            //触发点击
            input.click();
          }
        },
      },
    };
  },
  watch: {
    htmlStr(newValue) {
      this.tinymceHtml = newValue;
    },
    tinymceHtml(newValue) {
      this.$emit("handleChangeHtml", newValue);
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.editor-content {
  margin-top: 20px;
}
</style>

